<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>收益统计</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang-SC-Regular;
            color: #333333;
        }

        .choosedType {
            width: 100%;
            height: auto;
            border-bottom: 1px solid #dfdfdd;
            font-size: 0.3rem;
        }

        .choosedType ul {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .choosedType ul li {
            width: 50%;
            height: 1rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .choosedType ul li span {
            height: 0.94rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            border-bottom: 0.06rem solid #fff;
            color: rgba(38, 38, 38, 0.47);
        }

        .choosedType ul li:first-of-type {
            justify-content: flex-end;
            border-bottom-color: #FCCA00;
            padding-right: 0.67rem;
        }

        .choosedType ul li:last-of-type {
            padding-left: 0.67rem;
        }

        .choosedType ul li:first-of-type span {
            color: #F1C000;
            border-bottom-color: #FCCA00;
        }

        .coinClass {
            width: 100%;
            padding: 0.4rem 0.3rem 0.26rem 0.3rem;
            box-sizing: border-box;
        }

        .coinClass ul {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
        }

        .coinClass ul li {
            width: 25%;
            height: 0.62rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            color: #898989;
            font-size: 0.24rem;
            border: 1px solid rgba(236, 236, 236, 1);
            border-left: none;
        }

        .coinClass ul li:first-of-type {
            color: #262626;
            background-color: #FFD203;
            border-left: 1px solid rgba(236, 236, 236, 1);
        }

        .itemChoose {
            width: 100%;
            padding: 0 0.3rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            margin-top: 0.26rem;
            margin-bottom: 0.34rem;
        }

        .itemChoose p {
            width: 33%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 0.5rem;
            box-sizing: border-box;
            font-family: PingFang SC;
            font-size: 0.2rem;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            opacity: 0.63;
        }

        .itemChoose p span:first-of-type {
            position: relative;
            margin-bottom: 0.05rem;
        }

        .itemChoose p span:first-of-type i {
            display: block;
            position: absolute;
            z-index: 1;
            width: 0.2rem;
            height: 0.2rem;
            left: -.28rem;
            top: 0.15rem;
            margin-top: -0.13rem;
            background-color: #408CE1;
            border-radius: 100%;
        }

        .itemChoose p:nth-of-type(2) span:first-of-type i {
            background-color: #EC8124;
        }

        .itemChoose p:last-of-type span:first-of-type i {
            background-color: #FFCF11;
        }

        .timeClass {
            width: 100%;
            height: 0.66rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.3rem;
            background: #FBFBFC;
            font-family: PingFang SC;
            font-weight: bold;
            box-sizing: border-box;
            color: #595959;
        }

        .timeClass span:first-of-type {
            font-size: 0.28rem;
            color: #262626;
        }

        .timeClass span:last-of-type {
            font-size: 0.24rem;
            color: #262626;
            opacity: 0.44;
        }

        .timeChooseClass {
            width: 100%;
            padding: 0.4rem 0.3rem 0.26rem 0.3rem;
            box-sizing: border-box;
            margin-bottom: 0.9rem;
        }

        .timeChooseClass ul {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
        }

        .timeChooseClass ul li {
            width: 25%;
            height: 0.62rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            color: #898989;
            font-size: 0.24rem;
            border: 1px solid rgba(240, 240, 240, 1);
            border-left: none;
            background-color: rgba(248, 248, 248, 1);
        }

        .timeChooseClass ul li:first-of-type {
            color: #262626;
            background-color: #fff;
            border-left: 1px solid rgba(240, 240, 240, 1);
        }
    </style>
</head>

<body>
    <!-- <div class="coinClass">
        <ul id="getCoinType">
            <li data-type="BTC">
                BTC
            </li>
            <li data-type="BHP">
                BHP
            </li>
        </ul>
    </div> -->
    <p class="timeClass">
        <span>
            累计收益
        </span>
        <span class="todayTime">
        </span>
    </p>
    <div class="itemChoose">
        <p>
            <span class="coinName">
                挖矿产出
                <i class="coinTypeColor"></i>
            </span>
            <span class="incomeNum">
            </span>

        </p>
        <p class="unitPowerIncome" style="display: none;">
            <span>
                单位算力产出
                <i></i>
            </span>
            <span class="unitCalcNum">
            </span>
        </p>
    </div>
    <div id="container" style="height: 100%"></div>

    <div class="timeChooseClass">
        <ul id="chooseDataMonth">
            <li data-days="30">
                近一个月
            </li>
            <li data-days="90">
                近三月
            </li>
            <li data-days="180">
                近六月
            </li>
            <li data-days="360">
                近一年
            </li>
        </ul>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/app.js"></script>
    <script src="../../script/echarts_min.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var account = app.getAccount();
            var coinName = "BTC",
                monthNumber = 30,
                chooseKind = 1; //coinName 币种   monthNumber  月份  chooseKind 收益类型 1 累计 2 每日

            function getincomeNum(currency_name, chooseIncomType, chooseDays) {
                $(".incomeNum,.bhpFhNumber,.unitCalcNum").text("0.00000000");
                if (chooseDays != 1) {
                    $(".unitPowerIncome").show();
                } else {
                    $(".unitPowerIncome").hide();
                }
                if (currency_name == "BHP" && chooseDays != 1) {
                    $(".unitPowerIncome").hide();
                }
                if (currency_name != "BHP" && chooseDays != 1) {
                    $(".unitPowerIncome").show();
                }
                app.ajax({
                    param: {
                        method: "post",
                        url: app.ajaxUrl + "member/history-lists",
                        data: {
                            values: {
                                token: account.token,
                                type: chooseDays,
                                date_num: chooseIncomType,
                            }
                        },
                        callback: function (ret, err) {
                            console.log("收益我的收益返回" + JSON.stringify(ret));
                            if (ret.code == 200) {
                                var btcData = [], btcUnit = [], bhpFh = [], bhpData = [], bhpUnit = [], dataDays = [];
                                function changeNumber(arr, num) {
                                    var newArr = [];
                                    if (num == 8) {
                                        newArr = arr.map(function (item) {
                                            item = item > 0 ? app.sliceNum(item, 8) : "0.00000000";
                                            return item
                                        })
                                    } else {
                                        newArr = arr.map(function (item) {
                                            item = item > 0 ? app.sliceNum(item, 4) : "0.0000";
                                            return item
                                        })
                                    }
                                    return newArr
                                }

                                dataDays = ret.data.time;
                                function addText(arrfirst, arrsecond, arrThree) {
                                    var arr1Length = arrfirst.length;
                                    $(".incomeNum").text(arrfirst[arr1Length - 1]);
                                    var arr2Length = arrsecond.length;
                                    $(".unitCalcNum").text(arrsecond[arr2Length - 1]);
                                    if (arrThree.length > 0) {
                                        var arr3Length = arrThree.length;
                                        $(".bhpFhNumber").text(arrThree[arr3Length - 1]);
                                    }
                                    $(".todayTime").text(dataDays[dataDays.length - 1]);
                                }
                                var dom = document.getElementById("container");
                                var myChart = echarts.init(dom);
                                var option = {
                                    tooltip: {
                                        trigger: 'axis',
                                        formatter: function (params) {
                                            var thisdaydata = "";
                                            for (var i = 0; i < params.length; i++) {
                                                thisdaydata = params[i].name;
                                                $(".todayTime").text(thisdaydata);
                                                if (currency_name == "BTC" && chooseDays != 1) {
                                                    $(".incomeNum").text(params[0].value);
                                                    // $(".bhpFhNumber").text(params[1].value);
                                                    $(".unitCalcNum").text(params[1].value);
                                                } else if (currency_name != "BTC" && chooseDays != 1) {
                                                    $(".incomeNum").text(params[0].value);
                                                    if (currency_name != "BHP") {
                                                        $(".unitCalcNum").text(params[1].value);
                                                    }
                                                } else if (currency_name != "BTC" && chooseDays == 1) {
                                                    $(".incomeNum").text(params[0].value)
                                                } else if (currency_name == "BTC" && chooseDays == 1) {
                                                    $(".incomeNum").text(params[0].value);
                                                    // $(".bhpFhNumber").text(params[1].value);
                                                }
                                            }
                                        },
                                        axisPointer: {
                                            lineStyle: {
                                                color: "#FCCA00"
                                            }
                                        }
                                    },
                                    legend: {
                                        show: false
                                    },
                                    grid: {
                                        width: "90%",
                                        height: "300",
                                        top: 20,
                                        left: "5%",
                                        containLabel: true
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        lineStyle: {
                                            type: "dashed"
                                        },
                                        axisTick: { //X轴刻度线
                                            show: false
                                        },
                                        axisLine: { //x轴
                                            show: false
                                        },
                                        axisLabel: {
                                            show: true,
                                            interval: 10,
                                            textStyle: {
                                                color: "#979797"
                                            }
                                        },
                                        data: dataDays
                                    },
                                    yAxis: {
                                        type: 'value',
                                        splitNumber: 10,
                                        splitLine: {
                                            lineStyle: {
                                                type: "dashed"
                                            }
                                        },
                                        axisTick: { //y轴刻度线
                                            show: false
                                        },
                                        axisLine: { //y轴
                                            show: false
                                        },
                                        axisLabel: {
                                            show: true,
                                            textStyle: {
                                                color: "#979797"
                                            }
                                        },
                                        data: []
                                    },
                                    dataZoom: [{
                                        type: "inside"
                                    }],
                                    series: []
                                };
                                switch (chooseIncomType) {
                                    case 30:
                                        option.xAxis.axisLabel.interval = 10;
                                        break;
                                    case 90:
                                        option.xAxis.axisLabel.interval = 30;
                                        break;
                                    case 180:
                                        option.xAxis.axisLabel.interval = 60;
                                        break;
                                    case 360:
                                        option.xAxis.axisLabel.interval = 150;
                                        break;
                                }
                                if (currency_name == "BTC") {
                                    $(".coinTypeColor").css({
                                        backgroundColor: "#408CE1"
                                    })
                                    btcData = changeNumber(ret.data.lists, 8);
                                    btcUnit = changeNumber(ret.data.unit_num_day, 8);
                                    addText(btcData, btcUnit, bhpFh);
                                    if (chooseDays != 1) {
                                        option.series = [{
                                            name: 'BTC',
                                            type: 'line',
                                            color: "#408CE1",
                                            smooth: true,
                                            data: btcData
                                        },
                                        {
                                            name: 'BHP分红',
                                            type: 'line',
                                            color: "#EC8124",
                                            smooth: true,
                                            data: bhpFh
                                        }, ,
                                        {
                                            name: '单位算力产出',
                                            type: 'line',
                                            color: "#FFCF11",
                                            smooth: true,
                                            data: btcUnit
                                        }
                                        ];

                                    } else {
                                        option.series = [{
                                            name: 'BTC',
                                            type: 'line',
                                            color: "#408CE1",
                                            smooth: true,
                                            data: btcData
                                        },
                                        {
                                            name: 'BHP分红',
                                            type: 'line',
                                            color: "#EC8124",
                                            smooth: true,
                                            data: bhpFh
                                        }
                                        ];
                                    }
                                } else if (currency_name == "ETH") {
                                    $(".coinTypeColor").css({
                                        backgroundColor: "#FF5E5E"
                                    })
                                    ethData = changeNumber(ret.data.ETH, 8);
                                    ethUnit = changeNumber(ret.data.T_ETH, 8);
                                    addText(ethData, ethUnit, []);
                                    if (chooseDays != 1) {
                                        option.series = [{
                                            name: 'ETH',
                                            type: 'line',
                                            color: "#FF5E5E",
                                            smooth: true,
                                            data: ethData
                                        },
                                        {
                                            name: '单位算力产出',
                                            type: 'line',
                                            color: "#FFCF11",
                                            smooth: true,
                                            data: ethUnit
                                        }
                                        ];
                                    } else {
                                        option.series = [{
                                            name: 'ETH',
                                            type: 'line',
                                            color: "#FF5E5E",
                                            smooth: true,
                                            data: ethData
                                        }];
                                    }
                                } else if (currency_name == "BHP") {
                                    $(".coinTypeColor").css({
                                        backgroundColor: "#35B28C"
                                    })
                                    bhpData = changeNumber(ret.data.BHP, 4);
                                    bhpUnit = changeNumber(ret.data.T_BHP, 4);
                                    addText(bhpData, [], []);
                                    option.series = [{
                                        name: 'BHP',
                                        type: 'line',
                                        color: "#35B28C",
                                        smooth: true,
                                        data: bhpData
                                    }];
                                } else {
                                    $(".coinTypeColor").css({
                                        backgroundColor: "#4FCDE6"
                                    })
                                    ltcData = changeNumber(ret.data.LTC, 8);
                                    ltcUnit = changeNumber(ret.data.T_LTC, 8);
                                    addText(ltcData, ltcUnit, []);
                                    if (chooseDays != 1) {
                                        option.series = [{
                                            name: 'LTC',
                                            type: 'line',
                                            color: "#4FCDE6",
                                            smooth: true,
                                            data: ltcData
                                        },
                                        {
                                            name: '单位算力产出',
                                            type: 'line',
                                            color: "#FFCF11",
                                            smooth: true,
                                            data: ltcUnit
                                        }
                                        ];
                                    } else {
                                        option.series = [{
                                            name: 'LTC',
                                            type: 'line',
                                            color: "#4FCDE6",
                                            smooth: true,
                                            data: ltcData
                                        }]
                                    }
                                }
                                if (option && typeof option === "object") {
                                    myChart.setOption(option, true);
                                    $("#container").height("320");
                                    $("#container").css({
                                        overflow: "hidden"
                                    })
                                }

                            } else {
                                app.toast(ret.message);
                            }
                        }
                    },
                    extra: {
                        isflower: true
                    }
                });

            }
            getincomeNum("BTC", 30, 1);
            // 币种选择
            $("#getCoinType li").on("tap click", function () {
                $("#getCoinType li").css({
                    backgroundColor: "#fff",
                    color: "#898989"
                });
                $(this).css({
                    backgroundColor: "#FFD203",
                    color: "#262626"
                })
                coinName = $(this).data("type");
                getincomeNum(coinName, monthNumber, chooseKind);
            })
            //日期选择
            $("#chooseDataMonth").on("tap click", "li", function () {
                $("#chooseDataMonth li").css({
                    backgroundColor: "rgba(248, 248, 248)",
                    color: "#898989"
                });
                $(this).css({
                    backgroundColor: "#fff",
                    color: "#262626"
                })
                monthNumber = $(this).data("days");
                getincomeNum(coinName, monthNumber, chooseKind);
            })
            //累计 每日
            app.listen("chooseIncomeType", function (ret, err) {
                chooseKind = ret.value;
                getincomeNum(coinName, monthNumber, chooseKind);
            })
        }
    </script>

</body>

</html>